<script setup>
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { getUserRegistrat, getRegistCancel } from '@/apis/apis.js'
import point from '@/components/point.vue'
const data = ref([])
const handleCancel = async (item) => {
  if (!item.cancel) return
  await getRegistCancel({
    _id: item._id
  })
  item.cancel = false
}
onShow(async () => {
  const res = await getUserRegistrat()
  console.log(res)
  data.value = res.data
})
</script>

<template>
  <view class="view">
    <view class="item" v-for="(item, index) in data" :key="index">
      <view class="item-header">
        <image class="item-header-left" :src="item.avatar" mode="aspectFill"></image>
        <view class="item-header-right">
          <view class="item-header-right-name">{{ item.tre_doctor }}</view>
          <view class="item-header-right-address">{{ item.tre_place }}</view>
        </view>
      </view>
      <view class="item-body">
        <view class="item-body-item">
          <view class="item-body-item-left">预约流水号</view>
          <view class="item-body-item-right">{{ item.se_number }}</view>
        </view>
        <view class="item-body-item">
          <view class="item-body-item-left">就诊人</view>
          <view class="item-body-item-right">{{ item.patient_name }}</view>
        </view>
        <view class="item-body-item">
          <view class="item-body-item-left">就诊时间</view>
          <view class="item-body-item-right">{{ item.tre_time }} {{ item.the_time }}</view>
        </view>
        <view class="item-body-item">
          <view class="item-body-item-left">科室</view>
          <view class="item-body-item-right">{{ item.dep_ment }}</view>
        </view>
        <view class="item-body-item">
          <view class="item-body-item-left">排队号</view>
          <view class="item-body-item-right">{{ item.que_number }}</view>
        </view>
        <view class="item-body-item">
          <view class="item-body-item-left">科室楼层</view>
          <view class="item-body-item-right">{{ item.remark }}</view>
        </view>
        <view class="item-body-item">
          <view class="item-body-item-left">挂号费用</view>
          <view class="item-body-item-right">{{ item.reg_cost }}</view>
        </view>
      </view>
      <view class="item-footer">
        <view class="item-footer-cancel" :class="{ active: !item.cancel }" @click="handleCancel(item)">{{ item.cancel ? '取消预约' : '已取消预约' }}</view>
      </view>
    </view>
    <point v-if="data.length <= 0" text="你还没有挂号记录" />
  </view>
</template>

<style scoped lang="scss">
.view {
  padding-top: 20rpx;
  min-height: 100vh;
  background-color: #f8f8f8;
  .item {
    margin: 0 20rpx 20rpx;
    padding: 20rpx;
    background-color: #fff;
    border-radius: 10rpx;
    .item-header {
      display: flex;
      align-items: center;
      margin-bottom: 40rpx;
      .item-header-left {
        margin-right: 20rpx;
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
      }
      .item-header-right {
        .item-header-right-name {
          margin-bottom: 20rpx;
          font-weight: bold;
        }
        .item-header-right-address {
          font-size: 28rpx;
        }
      }
    }
    .item-body {
      .item-body-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 40rpx;
      }
    }
    .item-footer {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .item-footer-cancel {
        padding: 20rpx 40rpx;
        border: 1px solid #4aace4;
        border-radius: 10rpx;
        color: #4aace4;
        &.active {
          border: 1px solid #666;
          color: #666;
        }
      }
    }
  }
}
</style>
